<template>
  <div class="s-box">
    <view-box ref="viewBox" body-padding-top="0" body-padding-bottom="0">

      <div class="logo">
        <img src="../../assets/images/logo.jpg" alt="">
      </div>
      <group labelWidth="2.2rem">
        <x-input v-model="user.phoneNumber" title="手机号码" name="mobile" mask="999 9999 9999" :max="13"
                 placeholder="请输入手机号码" keyboard="number" is-type="china-mobile">
        </x-input>
        <x-input v-model="user.verifyCode" type="number" placeholder="请输入验证码" title="验证码">
          <x-button class="sendButton" slot="right" type="primary" mini @click.native="sendMessage">
            {{isSendMessage ? time + '秒后可再试' : '发送验证码'}}
          </x-button>
        </x-input>
      </group>


      <box gap="1rem">
        <x-button type="primary" :disabled="loading" :show-loading="loading" @click.native="submit">登录</x-button>
      </box>
    </view-box>
  </div>
</template>

<script>
  import {Group, XInput, Box, XButton, ViewBox} from 'vux'

  export default {
    components: {
      Group,
      XInput,
      Box,
      XButton,
      ViewBox
    },
    data() {
      return {
        user: {
          phoneNumber: '',
          verifyCode: '',
          openId: localStorage.getItem('user_openId')
        },
        loading: false,
        isSendMessage: false,
        time: 59
      }
    },
    methods: {
      sendMessage() {
        if (this.isSendMessage) {
          return;
        }

        this.user.phoneNumber = this.user.phoneNumber.replace(/\s/g, "");
        const reg_phoneNumber = new RegExp("^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9]|19[0-9])[0-9]{8}$");
        if (reg_phoneNumber.test(this.user.phoneNumber)) {
          this.isSendMessage = true;
          let _self = this;
          let timer = window.setInterval(function () {
            _self.time--;
            if (_self.time === 0) {
              window.clearInterval(timer);
              _self.isSendMessage = false;
              _self.time = 59;
            }
          }, 1000);
          this.$api.sendMessage(this.user).then(data => {
            if (data.returnCode === 1) {

            } else {
              this.$vux.toast.show({
                text: data.returnMsg,
                position: 'middle',
                width: '5rem'
              })
            }
          })
        } else {
          this.$vux.toast.text('手机号码有误', 'middle')
        }
      },
      submit() {
        this.user.phoneNumber = this.user.phoneNumber.replace(/\s/g, "");
        const reg_phoneNumber = new RegExp("^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9]|19[0-9])[0-9]{8}$");
        if (reg_phoneNumber.test(this.user.phoneNumber)) {
          this.loading = true;
          this.$api.login(this.user).then(data => {
            if (data.returnCode === 1) {
              localStorage.setItem('user_token', data.user.token);
              localStorage.setItem('user_userId', data.user.userId);
              this.$router.replace('/user');
            } else {
//              this.$vux.toast.text(data.returnMsg, 'middle');
              this.$vux.toast.show({
                text: data.returnMsg,
                position: 'middle',
                width: '5rem'
              })
            }
            this.loading = false;
          })
        } else {
          this.$vux.toast.text('手机号码有误', 'middle')
        }

      }
    }
  }
</script>

<style lang="less" scoped>
  .logo {
    margin-top: 10px;
    text-align: center;
    font-size: 1.2rem;
    color: #666666;
    img {
      width: 4rem;
    }
    p {
      font-size: .8rem;
    }
  }

  .sendButton {
    width: 3rem;
    font-size: .33rem;
  }
</style>
